<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'animate.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript">
		$(function(){
		     $("#nav").click(function(){
			   // $(this).animate({left:"+500"},5000); 
			      $(this).animate({ left: "-200px", opacity:"1"},"slow") 
			      .animate({ left: "200px" , opacity:"0.5"},"slow") 
			      .animate({ left: "-200px" , opacity:"1"},"slow") 
			      .animate({ left: "200px" , opacity:"0.5"},"slow") 
				  .animate({ left: "-200px" , opacity:"1"},"slow") 
				  .animate({ left: "200px" , opacity:"0.5"},"slow") 
			      .animate({ left: "0" , opacity:"1"},"slow"); 
			}); 
		     
		     $("#go").click(function(){
			  $("#block").animate({ 
			    width: "90%",
			    height: "100%", 
			    fontSize: "10em", 
			    borderWidth: 10
			  }, 1000 );
			});
		     
		    	 $("#divtoggle").animate({
		    		 height:"toggle",
		    		 opacity:"toggle"
		    	 },1000);
		     
		  	$(document).ready(function(){
			  $("button#bDemo").click(function(){
			    $("div#divDemo").animate({left:"+=170px",opacity:"0.5"},"slow");
			    $("div#divDemo").animate({fontSize:"5em"},"slow");
			  });
			});
		})
	</script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
      <div style="background: gray;height:100px;width:210px;position:relative;" id="nav">
      	 <img alt="picture" src="images/tipright.png">
      </div>
	<button id="bDemo">开始动画</button><br><br>
	<div id="divDemo" style="background:#98bf21;height:100px;width:210px;position:relative;">jQuery</div><br/>
    <div id="divtoggle" style="background:#98bf21;height:100px;width:210px;position:relative;">toggle</div>
  </body>
</html>
